
import PlayGroundCanvas, { currentGridInfo } from "./playground/backgroundCanvas";
import StructElement, { ElementLocationSizeMap } from "./StructElement/StructElement"
import ToolBar from "./toolBar/toolBar"
import GridConf from "@/core/GridConf";
import Scale from "./scale/Scale";
import $Element from "@/core/Element";
import Preview from "./preview/preview"
import PlaygroundSetting from "./playgroundSetting/playgroundSetting";
import StructSettingPad from "./StructSettingPad/StructSettingPad";
export default function desingerCreater(container: HTMLElement, widthGridNum: number = 24, heightGridNum: number = 24) {
    GridConf.widthGridNum = widthGridNum || 12;
    GridConf.heightGridNum = heightGridNum || 12;
    const currentPlayGround = new PlayGroundCanvas(container, 12);
    const structElement = new StructElement(container, currentPlayGround, 3, 3, 4, 3);
    const moveTarget = structElement.getElement();
    const leftMenuContainer = document.getElementById("left-menu") || document.createElement("div");
    const toolBar = new ToolBar(leftMenuContainer);

    const scaleTool = new Scale(new $Element(".inner-body-container"));
    scaleTool.addClassName("scale-tool");
    scaleTool.changePlaygroundSize((width: number, height: number) => {
        console.log(width, height);
        currentPlayGround.setPlaygroundSize(width, height)
    })
    const previewButton = new Preview(container);
    const playgroundSettingBar = new PlaygroundSetting(new $Element(".inner-body-container"));
    playgroundSettingBar.setButtons(["ColorPicker"]);

    // const settingPad = new StructSettingPad(new $Element(".inner-body-container"));
    // previewButton.render();
    document.getElementById("getconf-button")?.addEventListener("click", function () {
        console.log(Array.from(ElementLocationSizeMap.values()));
    });

}



